<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
	<link rel="stylesheet" href="./css/element-ui.css">
	<link rel="stylesheet" href="./css/index.css">
</head>

<body>

	<div id="app">
		<div class="top">
			<h1 class="header">在线接口文档</h1>
		</div>
		<!-- 左边树形区域 -->
		<div class="section">
			<div class="left">
				<el-tree :data="treeData" :expand-on-click-node="false" :props="{label: 'name'}" @node-click="handleNodeClick"></el-tree>
			</div>
			<!-- 右边数据展示部分 -->
			<div class="right">
				<div v-show="noData" class="no-data-show">
					<h1>暂无数据</h1>
				</div>
				<div v-show="!noData">
					<!-- form 1 -->
					<el-form :model="form" label-width="70px" class="edit-form">
						<el-form-item label="接口描述">
							<el-input v-model="form.data.description" class="desc" readonly></el-input>
						</el-form-item>

						<el-form-item label="接口地址">
							<el-input v-model="form.data.intfAddress" placeholder="必填项" readonly class="desc"></el-input>
							<el-select v-model="form.data.method" class="select-method" disabled>
								<el-option :label="item.name" :value="item.type" v-if="item.status" v-for="item of form.methods" :key="item.type"></el-option>
							</el-select>
						</el-form-item>
						<!-- 入参输入 -->
						<el-form-item label-width="auto" label="入参字符串 (注释请附带在每一行之后)">
						</el-form-item>
						<el-form-item class="params">
							<!-- get方式 -->
							<div v-show="showGetMethod">
							</div>
							<!-- post方式 -->
							<div v-show="form.data.method === form.methods[1].type">
								<el-radio-group v-model="form.data.way">
									<el-radio label="form" v-if="form.data.way==='form'"></el-radio>
									<el-radio label="json" v-if="form.data.way==='json'"></el-radio>
								</el-radio-group>
								<!-- form -->
								<div v-show="form.data.way === form.post.form" class="add-params">
									<!-- 参数列表 post-->
									<el-form :inline="true" class="demo-form-inline param-items">
										<ul>
											<li v-for="(param, index) in form.params" :key="index" class="item">
												<el-form-item label-width="120px" label="">
													<el-input readonly v-model="param.name" width="120px" placeholder="name" class="name"></el-input>
												</el-form-item>
												<el-form-item>
													<el-select v-model="param.type" class="type" disabled>
														<el-option label="text" value="text"></el-option>
														<el-option label="file" value="file"></el-option>
													</el-select>
												</el-form-item>

												<el-form-item>
													<el-select v-model="param.isRequire" class="is-require" disabled>
														<el-option label="非必需" :value="false"></el-option>
														<el-option label="必需" :value="true"></el-option>
													</el-select>
												</el-form-item>
												<el-form-item label="">
													<el-input v-model="param.example" readonly placeholder="参数示例" class="example"></el-input>
												</el-form-item>
												<el-form-item label-width="120px" label="">
													<el-input readonly v-model="param.remark" placeholder="备注" class="remark"></el-input>
												</el-form-item>
											</li>
										</ul>
									</el-form>
								</div>
								<!-- json -->
								<div v-show="form.data.way === form.post.json" class="json">
									<el-row>
										<el-col :span="11" class="json-content-left">
											<el-form-item label-width="auto" label="接口入参(标准格式的json数据)" />
											<el-form-item label="" style="position: relative;">
												<el-input type="textarea" readonly v-model="form.data.inParams" class="input-value" :rows="rows" resize="none"></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="11">
											<el-form-item label-width="auto" label="接口入参(参数说明)" />
											<el-form-item label="">
												<el-input type="textarea" readonly v-model="form.data.descInParams" class="input-value" :rows="rows" resize="none"></el-input>
											</el-form-item>
										</el-col>
									</el-row>
								</div>
							</div>
						</el-form-item>
						<!-- <el-form-item label-width="auto" label="出参字符串 (注释请附带在每一行之后)" /> -->
						<div class="label-title">出参字符串 (注释请附带在每一行之后)</div>
						<el-form-item label="">
							<el-row class="json">
								<el-col :span="11" class="json-content-left">
									<el-form-item label-width="auto" label="接口出参(标准格式的json数据)" />
									<el-form-item label="" style="position: relative;">
										<el-input type="textarea" readonly v-model="form.data.resultOutParams" class="input-value" :rows="rows"
										 resize="none"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="11">
									<el-form-item label-width="auto" label="接口出参(参数说明)" />
									<el-form-item label="">
										<el-input type="textarea" readonly v-model="form.data.descOutParams" class="input-value" :rows="rows" resize="none"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form-item>

						<div class="label-title">接口图文描述</div>
						<el-form-item label="">
							<el-row>
								<el-col :span="22" class="json-content-left">
									<div id="editor">
										<div ref="editorElem"></div>
									</div>
								</el-col>
							</el-row>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>

	</div>
</body>
<!-- import Vue before Element -->
<script src="./js/data.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/wangEditor.min.js"></script>

<!-- import JavaScript -->
<script src="./js/element-ui.js"></script>
<script async="true">
	let defaultForm = {
		methods: [{
				name: "get",
				type: "get",
				status: 0
			},
			{
				name: "post",
				type: "post",
				status: 1
			}
		],
		post: {
			form: "form",
			json: "json"
		},
		/* 提交到后台的参数对象 */
		data: {
			description: "",
			intfAddress: "",
			method: "post",
			/* post提交类型-默认form */
			way: "form",
			inParams: "",
			descInParams: "",
			resultOutParams: "",
			descOutParams: "",
			editorHtml: ""
		},
		/* 接口 */
		getFormParams: [],
		formParams: [],
		params: [],
		/* 提交的修改记录 */
		modifyDesc: ""
	}
	var editor;
	new Vue({
		el: '#app',
		computed: {
			showGetMethod() {
				return this.form.data.method === this.form.methods[0].type;
			},
			treeData() {
				let data = [];
				for (let prop in tree) {
					data.push(...tree[prop]);
				}
				var treeData = this.changeDataToTree(data);
				return treeData
			}
		},
		data: function () {
			return {
				// treeData: tree,
				noData: true,
				rows: 20,
				form: JSON.parse(JSON.stringify(defaultForm))
			}
		},
		mounted() {
			this.initEditor()
		},
		methods: {
			initEditor() {
				var E = window.wangEditor
				// var editor = new E(this.$refs.editorElem)
				var editor = new E("#editor") //创建富文本实例
				// editor = new E("#editor")
				this.editor = editor
				editor.customConfig.menus = [ //菜单配置
					'head',
					'list', // 列表
					'justify', // 对齐方式
					'bold',
					'fontSize', // 字号
					'italic',
					'underline',
					'image', // 插入图片
					'foreColor', // 文字颜色
					'undo', // 撤销
					'redo' // 重复
				]
				editor.create()
				editor.$textElem.attr('contenteditable', false)
			},
			handleNodeClick(node) {
				// 设置数据
				var data = node.data
				if (node.isLeaf && data) {
					this.form.data = data
					if (data.method === this.form.methods[0].name) {
						this.form.params = data.inParams
						this.form.data.inParams = ""
					} else if (data.method === this.form.methods[1].name && data.way === "form") {
						this.form.params = data.inParams
						this.form.data.inParams = ""
					}
					this.editor.txt.html(this.form.data.editorHtml)
					this.noData = false;
				} else {
					this.noData = true;
				}
			},
			resetData() {
				this.form = JSON.parse(JSON.stringify(defaultForm))
			},
			/* 将后台的数据转化成父子结构数据返回 */
			changeDataToTree(data) {
				let map = new Map();
				data.forEach(item => {
					map.set(item.id, item);
				});
				let tree = [];
				data.forEach(item => {
					let parent = map.get(item.pId);
					if (parent) {
						(parent.children || (parent.children = [])).push(item);
					} else {
						/* 说明是根节点，直接加入数组中 */
						tree.push(item);
					}
				});
				/* 加上是否是叶子节点标记 */
				this.lockTreeNode(tree);
				return tree;
			},
			lockTreeNode(data, children) {
				children = children || "children"
				data.forEach(item => {
					if (item[children]) {
						item["isLeaf"] = false
						this.lockTreeNode(item[children], children)
					} else {
						/* //不存在，叶子节点 */
						item["isLeaf"] = true
					}
				})
			},
		}
	})
</script>

</html>